<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 375px;
            margin: 0;
            padding: 0;
        }

        .top {
            background-color: #00b51d;
            padding-bottom: 20px;
        }

        .top-title {
            color: #ffffff;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        .top-search {
            display: block;
            width: 340px;
            height: 32px;
            line-height: 32px;
            margin: 0 auto;
            border-radius: 4px;
            outline: none;
            border: none;
        }

        .theaters {
            margin-left: 15px;
        }

        .item {
            float: left;
            width: 75px;
            height: 130px;
            margin-right: 7px;
            margin-bottom: 10px;
            border: 1px solid rgb(12, 184, 12);
        }

        .mov-pic {
            display: block;
            width: 75px;
            height: 100px;
        }
        .movse-list {
            width: 340px;
            height: 100%;
            border: 1px solid rgb(12, 184, 12);
        }
    </style>
</head>

<body>
    <div class="top">
        <p class="top-title">首页</p>
        <input type="text" class="top-search" placeholder="搜索">
    </div>
    <div class="content">
        <div class="theaters">
            <span>影院热映</span>
            <span>查看更多</span>
            <div class="movse-list">

            </div>

        </div>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/xhr.js"></script>
    <script>
        $(function () {

            $('.top-search').click(function () {
                $.ajax({
                    url: new_movies,
                    success: function (res) {
                        console.log(res)
                        //console.log(res.subjects[0].title)
                        //console.log(res.subjects[0].images.small)
                        let arr=res.subjects;
                        var text = '';
                        for (var i = 0; i < arr.length; i++) {
                             text +=
                             `<div class="item">
                                <img class="mov-pic" src=${arr[i].images.small} alt="">
                                <span>${arr[i].title}</span>
                            </div>`
                        }
                        $('.movse-list').html(text);

                    }
                })
            })
        })
    </script>
</body>

</html>